<template>
  <header>
      <div class="systems">乐谷车辆监管系统</div>
      <!-- <div> -->
        <!-- <Icon type="toggle" style="vertical-align: sub" color="blue" size="24"></Icon> -->
        <Button style="position: absolute; top: 10px; right: 30%;" @click="modal1 = true" type="ghost" icon ="lock-combination" >模拟防拆</Button>
      <!-- </div> -->
      <Modal
        v-model="modal1"
        title="车辆相关信息"
        @on-ok="ok">
        <div style="text-align:center">
           <Table width="100%" border :columns="columns2" :data="data3"></Table>
        </div>
        <div slot="footer">
            <!-- <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button> -->
        </div>
    </Modal>
    <div id="allmap"  style="height: 100%;"></div>
    <!-- <Icon type="lock-combination"></Icon> -->
     <Bmap :position="position" v-on:startplays="startplays"  v-if="startplayz"></Bmap>
  </header>
</template>

<script>
import axios from 'axios';
export default {
  name: 'Header',
  data () {
    return {
      allMap: {
        map: null
      },
      data3: [
        {
          name: 'qadasd',
          car: '鲁Azaddsa',
          time: '2018-06-22 18:00:00',
          error: '车辆越界'
        }
      ],
      columns2: [
        {
          title: '车牌号',
          key: 'car',
          // width: 100,
          fixed: 'left'
        },
        {
          title: '设备号',
          key: 'name',
          // width: 100,
          fixed: 'left'
        },
        {
          title: '报警时间',
          key: 'time',
          // width: 100,
          fixed: 'left'
        },
        {
          title: '违规越界',
          key: 'error',
          // width: 100,
          fixed: 'left'
        }
      ],
      modal1: false,
      car_yasuo: '../static/img/car_yasuo_y.png',
      car_xisao: '../static/img/xisao_xihuo.png',
      provinceQuery: {//  查询省份内车辆---车辆位置数据
        orgId: 0,
        pageIndex: 1,
        pageSize: 999999,
        provinceId: ''//  Echarts点击省份获取ID
      },
      alldata: [],
      markerClusterer: null,
      startplayz: false,
      position: []
    }
  },
  components: {
    'Bmap': () => import('../components/bmap.vue')
  },
  created () {
    this.$nextTick(() => {
      // let self = this;
      this.allMap.map = new BMap.Map('allmap')
      // var navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
      // this.allMap.map.addControl(navigation);
      let opts = {offset: new BMap.Size(0, 50), anchor: BMAP_ANCHOR_BOTTOM_RIGHT};//  地图控件位置
      this.allMap.map.addControl(new BMap.NavigationControl(opts));
      var point = new BMap.Point(114.77168, 32.362885); // 创建点坐标
      this.allMap.map.enableScrollWheelZoom(true);
      this.allMap.map.centerAndZoom(point, 12);
      this.getData()
    })
  },
  methods: {
    ok () {
      this.$Message.info('Clicked ok');
    },
    getData () {
      axios.get('/dsp-vehiclesupervise-api2/api/locationQuery.do', {
        params: {
          orgId: 0,
          pageIndex: 1,
          pageSize: 30,
          provinceId: 116
        }
      }).then((res) => {
        this.allData = res.data.data;
        var polygon = new BMap.Polygon([
          new BMap.Point(this.allData[0].longitude, this.allData[0].latitude),
          new BMap.Point(this.allData[1].longitude, this.allData[11].latitude),
          new BMap.Point(this.allData[12].longitude, this.allData[12].latitude),
          new BMap.Point(this.allData[9].longitude, this.allData[9].latitude),
          new BMap.Point(this.allData[10].longitude, this.allData[10].latitude)
        ], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: 'red'});//创建多边形
        this.allMap.map.addOverlay(polygon);   // 增加多边形
        let latLng = '';  //  经纬度
        let myIcon = '';  //  自定义icon
        let marker = '';
        //  循环点数据
        this.allData.forEach((element) => {
          // let wgs = wgs84togcj02(element.longitude, element.latitude);
          // let gcj = gcj02tobd09(wgs[0], wgs[1]);
          let imgurl = `../static/img/wu.png`;
          myIcon = new BMap.Icon(imgurl, new BMap.Size(48, 48));//  自定义图标
          latLng = new BMap.Point(element.longitude, element.latitude);//  经纬度
          marker = new BMap.Marker(latLng, {icon: myIcon});//  存储经纬度和自定义图标
          this.alldata.push(marker);
          const Notavailable = '暂无';
          if (element.videodeviceids !== '') {
            element.car_videos = this.car_videos;
          }
          if (element.driverName_Phonenumber === '未知' || element.driverName_Phonenumber === '') {
            element.driverName_Phonenumber = Notavailable;
          }
          if (element.startjobTime === '' && element.endjobTime === '') {
            element.startjobTime = Notavailable;
            element.endjobTime = Notavailable;
          }
          if (element.direction === '') {
            element.direction = Notavailable;
          }
          let content = `<div id="windowinfo">
            <div class="commons"><span>驾驶员 : </span><span>${element.driverName_Phonenumber}</span></div>
            <div class="commons"><span>车牌号 : </span><span id="plate">${element.vehiclePlateNum}</span></div>
            <div class="commons"><span>时 间 : </span><span>${element.time}</span></div>
            <div class="commons"><span>所属单位 : </span><span id="company">银座汽车</span></div>      
            <div style="display: none;" id="eee">${element.videodeviceids}</div> 
            <div class="commons"><span>当前位置 : </span><span>${element.description}</span></div>
            <div id="guiji" style="display: none;">${element.vehicleId}</div>              
            <div class="commons"><span><a class="share" id="trail">轨迹回放</a></span></div>                                    
            </div>`;
          this.addClickHandler(content, marker);
        });
        this.markerClusterer = new BMapLib.MarkerClusterer(this.allMap.map, {markers: this.alldata}); //  创建聚合图标
        let myStyles = [{url: this.car_yasuo, size: new BMap.Size(52, 63), textColor: '#666', textSize: 12}];  //  聚合图标的路径、大小、文字
        this.markerClusterer.setStyles(myStyles); //  将自定义样式的图标添加到地图
        this.markerClusterer.addMarkers(this.alldata);
        this.markerClusterer.setMaxZoom(14);  //  设置聚合最大作用级别，大于14就不使用聚合
      });
    },
    startplays (is) {
      this.startplayz = is;
    },
    addClickHandler (content, marker) {
      const that = this;
      // console.log('111')
      marker.addEventListener("click", function (e) {
        that.openInfo(content, e);
      });
    },
    openInfo (content, e) {
      let p = e.target;
      var opts = {
        width : 400
        // height: 100
      }
      this.position = [p.getPosition().lng, p.getPosition().lat];
      // this.$store.dispatch('position', position);
      // position
      let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); //  窗口经纬度
      let infoWindow = new BMap.InfoWindow(content, opts);  //  创建信息窗口对象
      let that = this;
      EventWrapper.addListener(infoWindow, 'open', function (e) {
        let trail = document.getElementById('trail');
        let gui = document.getElementById('guiji').innerHTML;
        let plate = document.getElementById('plate').innerHTML;
        let company = document.getElementById('company').innerHTML;

        trail.addEventListener('click', function (e) {
          // that.vehicleId = gui;
          that.startplayz = true;
          // that.$store.state.row.vehiclePlateNum = plate;
          // that.$store.state.row.orgName = company;
          // that.$store.commit('ISBACK', true);
          // that.gettraces(gui);
          // that.startplays();
          // that.isback = true;
          // that.videodeviceids = eee;
        });
      });
        // console.log('轨迹');
      that.allMap.map.openInfoWindow(infoWindow, point);  // 开启信息窗口
    },
    personPush () {
      console.log('1');
    },
    carPush () {
      this.$router.push({
        path: 'carsearch'
      })
    }
  }
}
</script>

<style>
header {
  height: 100%;
  position: relative;
}
  header .commons .share {
    font-size: 14px;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
  }
  .systems {
    color: red;
    font-size: 24px;
    padding: 6px 0;
  }
  header .commons {
    padding: 2px 0px;
    font-size: 14px;
  }
  .ivu-btn {
    font-size: 14px;
  }
</style>

